<!-- 蓝色登录页面2 -->
<template>
	
	<view>
	<u-toast ref="uToast" />
		<view class="img-a">	
			<view class="t-b">
				您好，
				<br />
				欢迎注册一点
			</view>
		</view>
		<view class="login-view" style="">
			<view class="t-login">
				<form class="cl">
					<view class="t-a">
						<text class="txt">账号</text>
						<input type="number" name="account" placeholder="请输入您的账号" maxlength="11" v-model="registerForm.account" />
					</view>
					<view class="t-a">
						<text class="txt">密码</text>
						<input type="password" name="password" maxlength="18" placeholder="请输入您的密码" v-model="registerForm.password" />
					</view>
					<view class="t-a">
						<text class="txt">手机号</text>
						<input type="number" name="phone" maxlength="18" placeholder="请输入您的手机号" v-model="registerForm.phone" />
					</view>
					<view class="t-a">
						<input type="number" name="code" maxlength="6" placeholder="请输入验证码" v-model="registerForm.code" />
						<view  v-if="showText" @click="getCode()" class="t-c" >发送短信</view>
						<view v-else class="t-c" style="background-color: #A7A7A7;">重新发送({{ second }})</view>
					</view>
					<button @click="register()">注 册</button>
				</form>
				<view class="hint">
					登录代表同意
					<text class="link">一点商城(OCM) 用户协议、隐私政策，</text>
					并使用您已经同意授权的信息。
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {

	data() {
		return {
			second: 60, //默认60秒
			showText: true, //判断短信是否发送
			phone: '', //手机号码
			registerForm: {
			  //用户名
			  account: "123456",
			  //密码
			  password: "123456",
			  phone:"13999999999",
			  //账户类型
			  //type: "account",
			  //验证码的值
			  code: "111111",
			  //验证码的索引
			  key: "13999999999",
			},
		
			
		};
	},
	onLoad() {},
	onShow(){
		this.getCaptcha()
	},
	methods: {
		//获取验证码
		getCaptcha(){
			//TODO 获取手机短信
		},
		//当前注册按钮操作
		async register() {
			var that = this;
			if (!that.registerForm.account) {
				uni.showToast({ title: '请输入您的账号', icon: 'none' });
				return;
			}
			if (!that.registerForm.password) {
				uni.showToast({ title: '请输入您的密码', icon: 'none' });
				return;
			}
			if (!that.registerForm.code) {
				uni.showToast({ title: '请输入验证码', icon: 'none' });
				return;
			}
			
			this.$u.api.userRegister(this.registerForm).then(res=>{
				this.$refs.uToast.show({
					title: '注册成功，自动登录中....',
						// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
					type: 'success', 
						// 如果不需要图标，请设置为false
					icon: false,
					duration:500
				});
				uni.removeStorageSync('token')
				uni.setStorageSync('token','bearer '+res.accessToken);
				this.$store.commit('setUser',res);
				this.$refs.uToast.show({
					title: '登录成功',
						// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
					type: 'success', 
						// 如果不需要图标，请设置为false
					icon: false,
					duration:500,
				});
				uni.switchTab({
				    url: '/pages/tabbar/user/index'
				});
			});
			
		},
		//获取短信验证码
		getCode() {
			this.showText = false;
			var that = this;
			var interval = setInterval(() => {
				var times = that.second - 1;
				//that.second = times<10?'0'+times:times ;//小于10秒补 0
				that.second = times;
				console.log(times);
			}, 1000);
			setTimeout(() => {
				clearInterval(interval);
				that.second = 5;
				that.showText = true;
			}, 5000);
			//这里请求后台获取短信验证码
			that.showText = false;
			this.$u.api.getPhoneCaptcha({"phone":this.registerForm.phone}).then(res=>{
				this.registerForm.key = res;
			})
			
		},
	}
};
</script>
<style lang="scss">
@import './login.scss';

.txt {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}
.img-a {
	width: 100%;
	height: 450rpx;
	background-image: url("https://i.postimg.cc/7h4bkzX7/head.png");
	background-size: 100%;
}
.reg {
	font-size: 28rpx;
	color: #fff;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 50rpx;
	font-weight: bold;
	background: #f5f6fa;
	color: #000000;
	text-align: center;
	margin-top: 30rpx;
}

.login-view {
	width: 100%;
	position: relative;
	margin-top: -120rpx;
	background-color: #ffffff;
	border-radius: 8% 8% 0% 0;
}

.t-login {
	width: 600rpx;
	margin: 0 auto;
	font-size: 28rpx;
	padding-top: 80rpx;
}

.t-login button {
	font-size: 28rpx;
	background: #2796f2;
	color: #fff;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 50rpx;
	font-weight: bold;
}

.t-login input {
	height: 90rpx;
	line-height: 90rpx;
	margin-bottom: 50rpx;
	border-bottom: 1px solid #e9e9e9;
	font-size: 28rpx;
}

.t-login .t-a {
	position: relative;
}

.t-b {
	text-align: left;
	font-size: 42rpx;
	color: #ffffff;
	padding: 130rpx 0 0 70rpx;
	font-weight: bold;
	line-height: 70rpx;
}

.t-login .t-c {
	z-index: 10;
	position: absolute;
	right: 22rpx;
	top: 22rpx;
	background: #5677fc;
	color: #fff;
	font-size: 24rpx;
	border-radius: 50rpx;
	height: 50rpx;
	line-height: 50rpx;
	padding: 0 25rpx;
}

.t-login .t-d {
	text-align: center;
	color: #999;
	margin: 80rpx 0;
}

.t-login .t-e {
	text-align: center;
	width: 250rpx;
	margin: 80rpx auto 0;
}

.t-login .t-g {
	float: left;
	width: 33.33%;
}

.t-login .t-e image {
	width: 50rpx;
	height: 50rpx;
}

.t-login .t-f {
	text-align: center;
	margin: 150rpx 0 0 0;
	color: #666;
}

.t-login .t-f text {
	margin-left: 20rpx;
	color: #aaaaaa;
	font-size: 27rpx;
}

.t-login .uni-input-placeholder {
	color: #aeaeae;
}

.cl {
	zoom: 1;
}

.cl:after {
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
	content: '\20';
}
</style>
